JS雜拾-03-運算式與運算子

tags: ithome

內文摘要

• Expressions 運算式
• Operators 運算子

參考資料1：MDN — the Mozilla Developer Network
參考資料2：從ES6開始的JavaScript學習生活
參考資料3：Fooish 程式技術

Expressions 運算式

Operators 運算子

算術運算子 (Arithmetic Operator)

指派運算子 (Assignment Operator)

位元運算子 (Bitwise Operator)

比較運算子 (Comparsion Operator)

邏輯運算子 (Logical Operator)

1. 三種邏輯運算符：

   • Logical AND &&： 符號左右都是true才會得到true；其中任一方false，則得到false。
   • Logical OR ||：符號左右任一方為true，得到true；兩方都false，才會得到false。
   • Logical NOT!：原本是true，經!轉換會變成false
   • !!(xxx) 可以當Boolean(xxx)用

   !!'false' == !!'true'   // true  經過!!轉換，兩個值都是Boolean，且字串總是ture
   !!'false' === !!'true'   // true 即便使用嚴格比較===也是true，理由同上
   

2. 哪些資料類型經ToBoolean會轉換成falsy?

   • Undefined
   • Null
   • 0, -0, NaN
   • "" or ''

   Boolean("false"); // true
   Boolean("0");     // true
   Boolean(-0);      // false
   Boolean("''''");  // true
   Boolean('');      // false    
   

   • 去掉falsy值的小方法：

   const arr = [1, 2, 3, null, 'a', 0]
   arr.filter(Boolean)     // [1, 2, 3, 'a'] null跟0都是falsy，因此被清掉了
   arr                     // arr = [1, 2, 3, null, 'a', 0]陣列只是複製，沒有被改變 (immutable)
   

3. 短路求值(Short-circuit)

   • (&&)、(||)也稱為短路求值(Short-circuit)運算符
   • (||)運算時，如果第1個運算子為"falsy"時，回傳第2個運算子。否則，回傳第1個運算子。
   • (&&)運算時，如果第1個運算子為"falsy"時，回傳第1個運算子。否則，直接回傳第2個運算子。剛好跟(||)相反

     console.log('foo' || 'bar') // 'foo'
     console.log(false || 'bar') // 'bar'
     console.log(false && 'bar') // false
     console.log( 0 || '' || 5 || 'bar') //5
     console.log(false || null || '' || 0 || NaN || 'Hello'       || undefined) //'Hello'
     

   • 常用的"指定預設值"，範例:

     let a = value || 5    // 5是預設值
     

字串運算子 (String Operator)

特殊運算子 (Special Operator)

void運算子： 接收任意運算式或值

三元運算子，又稱條件運算子